<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<style>
			img{
				width: 100px;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- <button @click="isHot = !isHot">切换天气</button> -->
			<button @click="changeWeather">切换天气</button>
			<h2>今天天气很{{ isHot ? '炎热' : '凉爽'}}</h2>

			<!-- 天气如果炎热，那么展示下面这个div -->
			<div class="hot" v-show="isHot">
				<img src="https://s3.ax1x.com/2020/12/13/reC1IA.jpg"><br/>
				<span>建议：心静自然凉</span>
			</div>

			<!-- 天气如果凉爽，那么展示下面这个div -->
			<div class="cool" v-show="!isHot">
				<img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg"><br/>
				<span>建议：穿上秋裤吧</span>
			</div>
		</div>

		<script type="text/javascript" >
			new Vue({
				el:'#root',
				data:{
					isHot:true
				},
				methods:{
					changeWeather(){
						this.isHot = !this.isHot
					}
				}
			})
		</script>
	</body>
</html>